<template>

  <div >
    <!--  标签选择-->
    <div class="q-pa-sm">
      <div class="q-gutter-y-md">
        <q-btn-toggle
            v-model="CurrSelect"
            spread
            class="my-custom-toggle"
            no-caps
            toggle-color="blue-4"
            :options="tabs"
        >
        </q-btn-toggle>
      </div>
    </div>

    <!--内容区域-->
    <div class=" px-2 " style=" height: 90vh;">
      <div v-show="CurrSelect==SettingTypeAi">
        <SettingAI></SettingAI>
      </div>

      <div v-show="CurrSelect==SettingTypeSystem">
        <SettingSys />
      </div>
      <div v-show="CurrSelect==SettingTypeHotKey">
        <SettingHotKey></SettingHotKey>
      </div>

      <div v-show="CurrSelect==SettingTypeData">
        <SettingData></SettingData>
      </div>
    </div>

  </div>
</template>

<script setup  lang="ts">
import {onMounted, ref} from 'vue'
import SettingSys from "../layout/SettingSys.vue";
import {
  SettingTypeAi,
  SettingTypeArray,
  SettingTypeData,
  SettingTypeHotKey,
  SettingTypeSystem
} from "../constant/enums/setting_type";
import {GetLangArray} from "../utils/lang";
import SettingHotKey from "../layout/SettingHotKey.vue";
import SettingAI from "../layout/SettingAI.vue";
import SettingData from "../layout/SettingData.vue";

interface tabInfo {
  label:string,
  value:string
}
const CurrSelect=ref("")
const tabs =ref<tabInfo[]>([])
onMounted(()=>{
  let arr =GetLangArray(SettingTypeArray)
  for (let i = 0; i < 4; i++) {
    let item :tabInfo={label:arr[i],value:SettingTypeArray[i]}
    tabs.value.push(item)
  }
  CurrSelect.value=SettingTypeArray[0]
})




</script>

<style lang="sass" scoped>
//.my-custom-toggle
//  border: 1px solid #545f5f
</style>


